<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import * as echarts from 'echarts'

// 顶部卡片数据
const cardData = reactive({
  patientCount: { value: 32021, rate: '+9%', trend: 'up' },
  activeCount: { value: 429, rate: '+11%', trend: 'up' },
  successRate: { value: '99%', rate: '+7%', trend: 'up' }
})

// 工作情况数据
const workData = reactive({
  weeklyPatients: [320, 302, 341, 374, 390, 450, 420],
  weeklyConsultations: [120, 132, 101, 134, 90, 230, 210],
  weeklyPrescriptions: [220, 182, 191, 234, 290, 330, 310],
  weeklyReferrals: [150, 232, 201, 154, 190, 330, 410]
})

// 诊疗效果数据
const treatmentData = reactive({
  departmentEfficiency: [
    { value: 0.8, name: '内科' },
    { value: 0.9, name: '外科' },
    { value: 0.7, name: '儿科' },
    { value: 0.6, name: '妇科' },
    { value: 0.85, name: '骨科' },
    { value: 0.75, name: '神经科' },
    { value: 0.65, name: '眼科' },
    { value: 0.8, name: '耳鼻喉科' }
  ],
  patientSatisfaction: [95, 89, 93, 87, 92, 90, 88],
  recoveryRate: [0.85, 0.88, 0.82, 0.89, 0.9, 0.86, 0.84],
  readmissionRate: [0.05, 0.07, 0.06, 0.04, 0.03, 0.05, 0.06]
})

// 患者年龄分布
const ageDistribution = ref([
  { range: '0-12', count: 420, percentage: '25%' },
  { range: '13-24', count: 350, percentage: '18%' },
  { range: '25-36', count: 280, percentage: '15%' },
  { range: '37-48', count: 250, percentage: '12%' },
  { range: '49-60', count: 220, percentage: '10%' },
  { range: '61+', count: 180, percentage: '8%' }
])

// 科室诊疗数据
const departmentData = ref([
  { name: '内科', patientCount: 2824, waitTime: 62, consultTime: 1563, totalTime: 2625.66 },
  { name: '外科', patientCount: 2518, waitTime: 69, consultTime: 1512, totalTime: 2743 },
  { name: '儿科', patientCount: 2460, waitTime: 71, consultTime: 1482, totalTime: 2656.13 },
  { name: '妇科', patientCount: 2471, waitTime: 73, consultTime: 1534, totalTime: 2447.03 }
])

// 初始化图表
onMounted(() => {
  initRadarChart()
  initTrendChart()
  initAgeDistributionChart()
  initEfficiencyChart()
})

// 初始化雷达图
const initRadarChart = () => {
  const chartDom = document.getElementById('radar-chart')
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: 'center'
    },
    radar: {
      indicator: [
        { name: '内科', max: 100 },
        { name: '外科', max: 100 },
        { name: '儿科', max: 100 },
        { name: '妇科', max: 100 },
        { name: '骨科', max: 100 },
        { name: '神经科', max: 100 }
      ]
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [80, 90, 70, 60, 85, 75],
            name: '科室效率',
            areaStyle: {
              color: 'rgba(131, 120, 234, 0.3)'
            },
            lineStyle: {
              color: '#8378EA'
            }
          },
          {
            value: [70, 80, 60, 85, 75, 90],
            name: '患者满意度',
            areaStyle: {
              color: 'rgba(230, 134, 176, 0.3)'
            },
            lineStyle: {
              color: '#E686B0'
            }
          }
        ]
      }
    ]
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 初始化趋势图
const initTrendChart = () => {
  const chartDom = document.getElementById('trend-chart')
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['患者数量', '问诊数量', '处方数量', '转诊数量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '患者数量',
        type: 'line',
        data: workData.weeklyPatients,
        itemStyle: { color: '#8378EA' }
      },
      {
        name: '问诊数量',
        type: 'line',
        data: workData.weeklyConsultations,
        itemStyle: { color: '#E686B0' }
      },
      {
        name: '处方数量',
        type: 'line',
        data: workData.weeklyPrescriptions,
        itemStyle: { color: '#67C23A' }
      },
      {
        name: '转诊数量',
        type: 'line',
        data: workData.weeklyReferrals,
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 初始化年龄分布图
const initAgeDistributionChart = () => {
  const chartDom = document.getElementById('age-chart')
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ageDistribution.value.map(item => item.range),
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '患者数量',
        type: 'bar',
        barWidth: '60%',
        data: ageDistribution.value.map(item => item.count),
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 初始化效率图表
const initEfficiencyChart = () => {
  const chartDom = document.getElementById('efficiency-chart')
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['患者满意度', '康复率', '再入院率']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '百分比',
        min: 0,
        max: 100,
        position: 'left',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      {
        type: 'value',
        name: '比率',
        min: 0,
        max: 1,
        position: 'right',
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '患者满意度',
        type: 'line',
        yAxisIndex: 0,
        data: treatmentData.patientSatisfaction,
        itemStyle: { color: '#67C23A' }
      },
      {
        name: '康复率',
        type: 'line',
        yAxisIndex: 1,
        data: treatmentData.recoveryRate,
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '再入院率',
        type: 'line',
        yAxisIndex: 1,
        data: treatmentData.readmissionRate,
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }
  
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
</script>

<template>
  <div class="analysis-container">
    <!-- 顶部卡片区域 -->
    <div class="card-row">
      <el-card class="info-card">
        <div class="card-title">分享次数</div>
        <div class="card-value">{{ cardData.patientCount.value }}</div>
        <div class="card-rate" :class="cardData.patientCount.trend === 'up' ? 'up' : 'down'">
          月同比 {{ cardData.patientCount.rate }}
        </div>
        <div class="card-chart"></div>
      </el-card>
      <el-card class="info-card">
        <div class="card-title">注册活跃</div>
        <div class="card-value">{{ cardData.activeCount.value }}</div>
        <div class="card-rate" :class="cardData.activeCount.trend === 'up' ? 'up' : 'down'">
          月同比 {{ cardData.activeCount.rate }}
        </div>
        <div class="card-chart"></div>
      </el-card>
      <el-card class="info-card">
        <div class="card-title">注册成功率</div>
        <div class="card-value">{{ cardData.successRate.value }}</div>
        <div class="card-rate" :class="cardData.successRate.trend === 'up' ? 'up' : 'down'">
          月同比 {{ cardData.successRate.rate }}
        </div>
        <div class="card-chart"></div>
      </el-card>
    </div>

    <!-- 工作情况分析区域 -->
    <div class="section-title">工作情况分析</div>
    <div class="content-row">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>渠道用户分布</span>
          </div>
        </template>
        <div id="radar-chart" class="chart"></div>
      </el-card>
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>渠道用户停留天数</span>
          </div>
        </template>
        <div id="trend-chart" class="chart"></div>
      </el-card>
    </div>

    <!-- 诊疗效果分析区域 -->
    <div class="section-title">诊疗效果分析</div>
    <div class="content-row">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>同期预警分布</span>
          </div>
        </template>
        <div id="age-chart" class="chart"></div>
      </el-card>
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>诊疗效果趋势</span>
          </div>
        </template>
        <div id="efficiency-chart" class="chart"></div>
      </el-card>
    </div>

    <!-- 科室诊疗数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>客户成交额分类</span>
          <div class="filter-actions">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 300px"
            />
          </div>
        </div>
      </template>
      <el-table :data="departmentData" style="width: 100%" border stripe>
        <el-table-column prop="name" label="平台类型" />
        <el-table-column prop="patientCount" label="平台总额" />
        <el-table-column prop="waitTime" label="订单件数" />
        <el-table-column prop="consultTime" label="订单总额" />
        <el-table-column prop="totalTime" label="客单价" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.analysis-container {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 15px 0;
  color: #303133;
}

.card-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.info-card {
  flex: 1;
  min-height: 120px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.content-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  flex: 1;
  border-radius: 12px;
}

.table-card {
  border-radius: 12px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

.filter-actions {
  display: flex;
  align-items: center;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.card-rate {
  font-size: 12px;
  margin-bottom: 10px;
}

.card-rate.up {
  color: #67C23A;
}

.card-rate.down {
  color: #F56C6C;
}

.chart {
  height: 300px;
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .card-row, .content-row {
    flex-direction: column;
  }
  
  .info-card, .chart-card {
    width: 100%;
  }
}
</style>

